.flip {
  -webkit-transform: scaleX(-1);
      -ms-transform: scaleX(-1);
          transform: scaleX(-1);
}

/* sprite tile dimensions */
/* ken */
.ken, .fireball {
  position: absolute;
  bottom: 112px;
  margin-left: 150px;
  width: 70px;
  height: 80px;
  background-image: url("../img/ken.png");
  /* other sprites preloading */
}
.ken:before, .fireball:before {
  content: '';
  background: url("../img/ken-tatsumaki-senpuu-kyaku.png") no-repeat;
}
.ken:after, .fireball:after {
  content: '';
  background: url("../img/ken-shoryuken.png") no-repeat;
}

/* ken's fireball */
.fireball {
  position: absolute;
  left: 100%;
  bottom: 0px;
  margin-left: 0;
  /* default margin-left */
  background-position: 140px 320px;
  /* default background position */
  -webkit-transition: margin 8s linear;
          transition: margin 8s linear;
  /* triggering the movement with this class */
  -webkit-animation: fireball steps(2) 0.15s infinite;
          animation: fireball steps(2) 0.15s infinite;
}
.fireball:before {
  left: 25px;
  right: 25px;
}
.fireball.moving {
  margin-left: 4000px;
}

@-webkit-keyframes fireball {
  from {
    background-position: 0px -320px;
  }
  to {
    background-position: -140px -320px;
  }
}

@keyframes fireball {
  from {
    background-position: 0px -320px;
  }
  to {
    background-position: -140px -320px;
  }
}
/* ken's fireball impact explosion */
.explode {
  -webkit-animation: explode steps(4) 0.5s 1;
          animation: explode steps(4) 0.5s 1;
}

@-webkit-keyframes explode {
  from {
    background-position: 0px -400px;
  }
  to {
    background-position: -280px -400px;
  }
}

@keyframes explode {
  from {
    background-position: 0px -400px;
  }
  to {
    background-position: -280px -400px;
  }
}
/* stance */
.stance {
  -webkit-animation: stance steps(4) 0.5s infinite;
          animation: stance steps(4) 0.5s infinite;
}

@-webkit-keyframes stance {
  from {
    background-position: 0px -80px;
  }
  to {
    background-position: -280px -80px;
  }
}

@keyframes stance {
  from {
    background-position: 0px -80px;
  }
  to {
    background-position: -280px -80px;
  }
}
/* hadoken - must be declared AFTER .stance */
.hadoken {
  -webkit-animation: hadoken steps(4) 0.5s infinite;
          animation: hadoken steps(4) 0.5s infinite;
}

@-webkit-keyframes hadoken {
  from {
    background-position: 0px 0px;
  }
  to {
    background-position: -280px 0px;
  }
}

@keyframes hadoken {
  from {
    background-position: 0px 0px;
  }
  to {
    background-position: -280px 0px;
  }
}
/* punch */
.punch {
  -webkit-animation: punch steps(3) 0.15s infinite;
          animation: punch steps(3) 0.15s infinite;
}

@-webkit-keyframes punch {
  from {
    background-position: 0px -160px;
  }
  to {
    background-position: -210px -160px;
  }
}

@keyframes punch {
  from {
    background-position: 0px -160px;
  }
  to {
    background-position: -210px -160px;
  }
}
/* walking */
.walk {
  -webkit-animation: walk steps(5) 0.5s infinite;
          animation: walk steps(5) 0.5s infinite;
}

@-webkit-keyframes walk {
  from {
    background-position: 0px -240px;
  }
  to {
    background-position: -350px -240px;
  }
}

@keyframes walk {
  from {
    background-position: 0px -240px;
  }
  to {
    background-position: -350px -240px;
  }
}
/* kick */
.kick {
  -webkit-animation: kick steps(5) 0.5s infinite;
          animation: kick steps(5) 0.5s infinite;
}

@-webkit-keyframes kick {
  from {
    background-position: 0px -480px;
  }
  to {
    background-position: -350px -480px;
  }
}

@keyframes kick {
  from {
    background-position: 0px -480px;
  }
  to {
    background-position: -350px -480px;
  }
}
/* reverse kick */
.reversekick {
  -webkit-animation: reversekick steps(5) 0.5s infinite;
          animation: reversekick steps(5) 0.5s infinite;
}

@-webkit-keyframes reversekick {
  from {
    background-position: 0px -560px;
  }
  to {
    background-position: -350px -560px;
  }
}

@keyframes reversekick {
  from {
    background-position: 0px -560px;
  }
  to {
    background-position: -350px -560px;
  }
}
/* kneel down */
.kneel {
  -webkit-animation: kneel steps(1) 0.2s infinite;
          animation: kneel steps(1) 0.2s infinite;
}

@-webkit-keyframes kneel {
  from {
    background-position: 0px -720px;
  }
  to {
    background-position: -70px -720px;
  }
}

@keyframes kneel {
  from {
    background-position: 0px -720px;
  }
  to {
    background-position: -70px -720px;
  }
}
/* jump */
.jump {
  -webkit-transition: bottom 0.5s cubic-bezier(0.99, 0.005, 0, 0.42);
          transition: bottom 0.5s cubic-bezier(0.99, 0.005, 0, 0.42);
  bottom: 225px;
  -webkit-animation: jump steps(7) 1s infinite;
          animation: jump steps(7) 1s infinite;
}
.jump.down {
  bottom: 112px;
}

@-webkit-keyframes jump {
  from {
    background-position: 0px -640px;
  }
  to {
    background-position: -490px -640px;
  }
}

@keyframes jump {
  from {
    background-position: 0px -640px;
  }
  to {
    background-position: -490px -640px;
  }
}
/* shoryuken */
.shoryuken {
  height: 110px;
  background-image: url("../img/ken-shoryuken.png");
  -webkit-transition: bottom 0.5s cubic-bezier(0.99, 0.005, 0, 0.42);
          transition: bottom 0.5s cubic-bezier(0.99, 0.005, 0, 0.42);
  bottom: 225px;
  -webkit-animation: shoryuken steps(7) 1s infinite;
          animation: shoryuken steps(7) 1s infinite;
}
.shoryuken.down {
  bottom: 112px;
}

@-webkit-keyframes shoryuken {
  from {
    background-position: 0px 0px;
  }
  to {
    background-position: -490px 0px;
  }
}

@keyframes shoryuken {
  from {
    background-position: 0px 0px;
  }
  to {
    background-position: -490px 0px;
  }
}
/* tatsumaki senpuu kyaku */
.tatsumaki {
  height: 110px;
  background-image: url("../img/ken-tatsumaki-senpuu-kyaku.png");
  -webkit-transition: bottom 0.2s cubic-bezier(0.99, 0.005, 0, 0.42);
          transition: bottom 0.2s cubic-bezier(0.99, 0.005, 0, 0.42);
  bottom: 132px;
  -webkit-animation: tatsumaki steps(13) 2s infinite;
          animation: tatsumaki steps(13) 2s infinite;
}
.tatsumaki.down {
  bottom: 112px;
}

@-webkit-keyframes tatsumaki {
  from {
    background-position: 0px 0px;
  }
  to {
    background-position: -910px 0px;
  }
}

@keyframes tatsumaki {
  from {
    background-position: 0px 0px;
  }
  to {
    background-position: -910px 0px;
  }
}
.commands {
  margin-left: 450px;
  font-size: 12px;
  padding: 15px;
}
.commands h1 {
  margin-top: 0;
  font-size: 14px;
}
.commands i {
  padding: 0px 4px;
  font-style: normal;
  font-weight: bold;
  outline: 1px solid pink;
}
.commands button + button {
  white-space: nowrap;
}
.game-wrap{
  position: relative;
  width: 800px;
  height: 400px;
  margin: 0 auto;
}
.stage {
  position: absolute;
  top: 0;
  width: 450px;
  height: 330px;
  background: url("../img/sf2-bg.jpg") no-repeat 0px -100px;
  background-size: contain;
  float: left;
  margin-right: 20px;
}
#up{width: 28px;height: 28px;margin: 5px;background: url(../img/arrow-up.png);border: none;}
#right{width: 28px;height: 28px;margin: 5px;background: url(../img/arrow-right.png);border: none;}
#left{width: 28px;height: 28px;margin: 5px;background: url(../img/arrow-left.png);border: none;}
#down{width: 28px;height: 28px;margin: 5px;background: url(../img/arrow-down.png);border: none;}
.htmleaf-control{width: 150px;height: 150px;float: left;}
body {
  margin: 0;
  padding: 0;
}